<template>
  <button
    v-for="(_, tab) in tabs"
    :key="tab"
    :class="['tab-button', { active: currentTab === tab }]"
    @click="currentTab = tab"
  >
    {{ tab }}
  </button>
  <hr />
  <KeepAlive :max="10">
    <component :is="tabs[currentTab]" class="tab"></component>
  </KeepAlive>
</template>

<script setup>
import { ref } from 'vue'
import game from './components/game.vue'
import todoList from './components/todo-list.vue' // 修改为驼峰命名法

// 设置默认激活的案例
const currentTab = ref('game') // 修改为一个有效的 tab

// 把案例组件组织为tabs对象
const tabs = {
  game,
  todoList, // 修改为驼峰命名法
}
</script>

<style scoped>
.tab-button {
  margin-top: 6px;
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: green;
}

.tab-button.active {
  background: green;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
